<template>
  <div class="home">
    <!-- 查询条件 -->
    <el-form :inline="true" :model="searchdata" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input
          v-model="searchdata.name"
          clearable
          placeholder="名称"
        ></el-input>
      </el-form-item>

      <el-form-item label="上架日期">
        <el-date-picker
          clearable
          v-model="searchdata.launchTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="上架日期"
        >
        </el-date-picker>
      </el-form-item>
      <div class="searchBtn">
        <el-button type="text" icon="el-icon-search" @click="search"
          >查询</el-button
        >
        <el-button type="text" icon="el-icon-circle-plus-outline" @click="addTo"
          >添加</el-button
        >
        <el-button type="text" icon="el-icon-refresh-right" @click="refresh"
          >重置</el-button
        >
      </div>
    </el-form>

    <!-- 表格信息 -->
    <div class="table-main">
      <el-table
        :data="tableData"
        stripe
        class="tableBox"
        :row-style="iRowStyle"
        :cell-style="iCellStyle"
        :header-row-style="iHeaderRowStyle"
        :header-cell-style="iHeaderCellStyle"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="50px">
        </el-table-column>
        <el-table-column
          prop="name"
          width="140"
          label="名称"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column prop="desc" label="描述" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="launchTime"
          label="上架时间"
          width="170"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="salesVolume"
          label="销量"
          width="130"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="130"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="170">
          <template slot-scope="scope">
            <div style="display: flex">
              <el-button
                @click="changeRowData(scope.row)"
                type="text"
                size="small"
                icon="el-icon-edit-outline"
                class="success-color"
                >编辑</el-button
              >
              <el-button
                @click="removeRowData(scope.row)"
                type="text"
                size="small"
                icon="el-icon-circle-close"
                class="danger-color"
                >下架</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageData.pageNum"
          :page-sizes="[5, 10, 20, 30, 40, 50]"
          :page-size.sync="pageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total.sync="pageData.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getCoolePage, removeColl } from "../../util/time.js";

export default {
  data() {
    const db = this.$wxApp.database();
    return {
      // 微信操作数据库实例
      wxdb: db,
      // 列表
      tableData: [],
      // 查询数据
      searchdata: {
        name: "",
        launchTime: "",
      },
      // 分页数据
      pageData: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    iRowStyle: function ({ row, rowIndex }) {
      return {
        height: "35px",
      };
    },
    iHeaderRowStyle: function ({ row, rowIndex }) {
      return {
        height: "35px",
      };
    },
    iCellStyle: function ({ row, column, rowIndex, columnIndex }) {
      return "padding:0px";
    },
    iHeaderCellStyle: function ({ row, column, rowIndex, columnIndex }) {
      return "padding:0px";
    },
    // 重置按钮
    refresh() {
      this.searchdata.name = "";
      this.searchdata.launchTime = "";
      this.pageData.pageNum = 1;
      this.pageData.pageSize = 10;
      this.search();
    },
    // 查询数据
    search() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      const _ = this.wxdb.command;
      let serarchobj = {
        // 模糊搜索名称
        name: new this.wxdb.RegExp({
          regexp: ".*" + this.searchdata.name,
          options: "i",
        }),
        // 模糊搜索日期
        launchTime: new this.wxdb.RegExp({
          regexp: ".*" + this.searchdata.launchTime,
          options: "i",
        }),
      };
      getCoolePage(
        "books",
        this.pageData.pageNum,
        this.pageData.pageSize,
        serarchobj
      ).then((res) => {
        loading.close();
        console.log(res);
        if (!res.code) {
          this.tableData = res.data || [];
          this.pageData.total = res.total;
        } else {
          this.$message.error("查询失败");
        }
      });
    },
    // 改变页码
    handleCurrentChange(page) {
      this.pageData.pageNum = page;
      this.search();
    },
    // 改变每页显示数量
    handleSizeChange(size) {
      this.pageData.pageSize = size;
      this.search();
    },
    // 添加弹框显示按钮
    addTo() {
      this.$router.push({ path: "/addProduct" });
    },
    // 编辑行数据
    changeRowData(row) {
      console.log(row);
      this.$router.push({
        path: "/addProduct",
        query: { rawId: row._id },
      });
    },
    // 下架数据方法
    removeRowData(data) {
      console.log(data);

      this.$confirm("确定要下架该商品吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          // 要下架的商品图片id集合
          let removeids = [
            ...data.coverImg.map((item) => item.fileID),
            ...data.introduceUrl.map((item) => item.fileID),
            ...data.lunboImageUrls.map((item) => item.fileID),
          ];
          // 删除商品所有图片
          this.$wxApp
            .deleteFile({
              fileList: removeids,
            })
            .then(() => {
              removeColl("books", data._id).then((res) => {
                if (!res.code) {
                  loading.close();
                  this.$message({
                    type: "success",
                    message: "下架成功!",
                  });
                  this.search();
                }
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消下架",
          });
        });
    },
  },
};
</script>

<style scoped>
.home {
  margin-top: 5px;
  background-color: white;
  padding: 10px;
}
.tableBox th {
  padding: 0 !important;
  height: 30px;
  line-height: 30px;
}
.tableBox td {
  padding: 0 !important;
  height: 30px;
  line-height: 30px;
}
.tablebtns {
  display: flex;
  flex-wrap: nowrap;
}
.demo-form-inline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}
.searchBtn {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 20px;
}
.table-main {
  border: 1px solid #e1e6eb;
  width: 100%;
}
.danger-color {
  color: #f56c6c;
}
.success-color {
  color: #67c23a;
}
.row-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
</style>
